<!DOCTYPE html>
<html>
<head>
	<title>xxx</title>
	<meta charset="UTF-8">
	<script src="{{ url_for('static',filename='jquery-3.6.0.min.js') }}" type="text/javascript"></script>
	<script src="{{ url_for('static',filename='socket.io.3.0.0.min.js') }}" type="text/javascript"></script>
</head>
<body>
	<span id="notice-span">{{ notice }}</span>
	<a href="/record">录音</a> <a href="/">刷新</a> 后端：<select name="backend" id="backend-select" onchange="set_backend();">{% if backend=='whisper' %}<option value="whisper" selected="selected">whisper</option><option value="vosk">vosk</option>{% elif backend=='vosk' %}<option value="whisper">whisper</option><option value="vosk" selected="selected">vosk</option>{% endif %}</select><span id="info"></span>
	<p style="display:none;" id="count-p"><span id="count-span">0</span>/<span id="predict-count-span">{{ wav_duration*3.5 }}</span></p>
	{% for i in range(entries|length) %}
	<p>{{ entries[i].name }} <a href="{{ url_for('.play_wav',wav_id=names[i]) }}">播放</a> <a href="{{ url_for('.index',wav_id=names[i],page=page,wav_duration=wav_durations[i]) }}">转录</a> <a href="{{ url_for('.dele',wav_id=names[i]) }}">删除</a> <span id="trans-{{ entries[i].name }}">{{ transcripts[i] }}</span></p>
	{% endfor %}
	跳转至 第 
	{% for pn in page_range %}
		<a href="{{ url_for('.index',page=pn) }}">{{ pn }}</a>
	{% endfor %} 页 
	共有{{ total_pages }}页
</body>
<script type="text/javascript">
	function count_it(){
		if($('#notice-span').text().length==0){
			setTimeout(function(){
				count_it();
			},1000);
		}
		$('#count-span').text(parseInt($('#count-span').text())+1);
	}

	function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
    }

    function set_backend(){
    	let value=$('#backend-select').val();
    	$('#info').text('正在将后端更新为'+value);
		$.ajax({
			type:'GET',
			url:'/set_backend/'+value,
			success:function(data,status,request){
				$('#info').text(value+'模型已加载');
			},
			error:function(){
				alert('设置'+value+'为后端的过程中出现错误');
			}
		})
    }

	$(document).ready(function(){
		var wav_duration=parseFloat(getUrlParam('wav_duration'));
		if(wav_duration>-1){
			setTimeout(function(){
				count_it();
			},1000);
			$('#count-p').attr('style','display:block');
			$.ajax({
				type:'GET',
				url:'/transcribe_json/'+getUrlParam('wav_id')+'?wav_duration='+wav_duration,
				timeout:5000000,
				success:function(data,status,request){
					$('#notice-span').text(data['notice']);
					console.log($('#trans-'+getUrlParam('wav_id')+'.wav').text());
					var trans_span=document.getElementById('trans-'+getUrlParam('wav_id')+'.wav')
					trans_span.innerText=data['trans'];
				},
				error:function(){
					alert('语音识别过程出现错误');
				}
			});
		}
	});
</script>
</html>